<template>
  <div class="container">
    <!-- props属性在父组件中用来接收子组件中传过来的值 -->
    <h1>学生的姓名:{{ name }}</h1>
    <h1>学生的性别:{{ sex }}</h1>
    <h1>学生的年龄:{{ myAge }}</h1>
    <button @click="addAge">点击后年龄增加</button>
  </div>
</template>
<script>
export default {
  //组件的名称
  name: "Student",
  data(){
      return{
          myAge:this.age
      }
  },
  methods:{
      addAge(){
         this.myAge++
      }

  },
  //简单的接收来App.vue父组件传过来的值
  props:["name","sex","age"]

  //复杂的接收来自App.vue中组件传过来的值
//   props:{
//       name:String,
//       age:Number,
//       sex:String
//   }
 
 //更完整的写法
//  props:{
//      name:{
//          type:String,
//          required:true //必填的
//      },
//      //如果组件中传过来的值中没有age的话，那么默认值就是99
//      age:{
//          type:Number,
//          default:99
//      },
//      sex:{
//          type:String,
//          required:true
//      }

//  }

};
</script>
<style scoped>
.container {
  background-color: aqua;
}
</style>
